<template>
  <div class="tmpl">
    <nav-bar title="购物车"></nav-bar>
    <div class="pay-detail">
      <ul>
        <li v-for="(goods,index) in goodsList" :key="goods.id" class="p-list">
          <mt-switch v-model="goods.isPicked"></mt-switch>
          <img :src="goods.thumb_path">
          <div class="pay-calc">
            <p v-text="goods.title"></p>
            <div class="calc">
              <span>￥{{goods.sell_price}}</span>
              <span @click="sub(index)">-</span>
              <span>{{goods.num}}</span>
              <span @click="add(index)">+</span>
              <a href="javascript:;" @click="del(index)">删除</a>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="show-price">
      <div class="show-1">
        <p>总计(不含运费):</p>
        <span>已经选择商品{{payment.num}}件，总价￥{{payment.sum}}元</span>
        <!-- <span>已经选择商品100件，总价￥1000元</span> -->
      </div>
      <div class="show-2">
        <mt-button type="danger" size="large">去结算</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
  import prodsTools from '../common/prodTools.js';
  
  //通知底部变更数据
  import connect from '../common/connect.js';
  export default {
    data() {
      return {
        goodsList: [{
          id: 98,
          thumb_path: "./src/dataJson/swiper01.jpg",
          title: "华为荣耀一",
          sell_price: "10",
          // num: 4,
        }, {
          id: 99,
          thumb_path: "./src/dataJson/swiper02.jpg",
          title: "华为荣耀二",
          sell_price: "20.15",
          // num: 10,
  
        }, {
          id: 100,
          thumb_path: "./src/dataJson/swiper03.jpg",
          title: "华为荣耀三",
          sell_price: "30",
          // num: 15,
  
        }]
      }
    },
    created() {
      let prods = prodsTools.getProds();

      //判断是否有商品 没有就返回

      if(Object.keys(prods).length === 0) return;

      var url = 'goods/goodlist/';
      url += Object.keys(prods).join(',');
      // this.$ajax.get('https://www.baidu.com')
      // .then(res=>{
      //   this.goodsList = res.data.message;
      //  prods {"98":4,"99":20}
      this.goodsList.forEach((ele, index) => {
        // console.log(ele);
  
        //在vue中添加属性,是没有做到办法做到响应的
        // if(prods[ele.id]){
        //   ele.num = prods[ele.id];
        //   ele.isPicked = true;
        // }
        //添加属性一定要用$set
        this.$set(ele, 'num', prods[ele.id]);
        this.$set(ele, 'isPicked', true);
  
  
  
      });
  
      // })
      // .catch(err=>{
  
      // })
  
  
    },
    methods: {
      add(i) {
        this.goodsList[i].num++;
        connect.$emit('addShopcart', 1);
        prodsTools.addOrUpDate({
          id: this.goodsList[i].id,
          num: 1
        });
      },
      sub(i) {
        if (this.goodsList[i].num <= 1) return;
        this.goodsList[i].num--;
        connect.$emit('addShopcart', -1);
        prodsTools.addOrUpDate({
          id: this.goodsList[i].id,
          num: -1
        });
  
      },
      del(i) {
        //删除内存 删除storage 通知下方的nummer小球变化
        let goods = this.goodsList[i];

        //删除本地缓存
        prodsTools.delete(goods.id);

        //通知购物车的小球变化
        connect.$emit('addShopcart',-goods.num);

        ///删除内存
        this.goodsList.splice(i,1);


        
      }
    },
    computed:{ //监视属性值得的变化
      payment(){
        //1.判断商品是否被选中, 遍历数组中那些商品被选中
        //2.计算总金额 = 件数*单价
        //3.将以上总金额累计
        //4.如果是选中就加上当前商品的件数

        let num= 0,sum = 0;
        this.goodsList.forEach(ele=>{
          if(ele.isPicked){
            sum += ele.num *ele.sell_price; //总金额
            num += ele.num; //总件数
          }
        })
        return{
          num,sum
        }
      }
    }
  }
</script>

<style scoped>
  .pay-detail ul li {
    list-style: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    margin-bottom: 3px;
  }
  
  .pay-detail ul {
    padding-left: 5px;
    margin-top: 5px;
  }
  
  .pay-detail ul li img {
    width: 80px;
    height: 80px;
    display: inline-block;
    vertical-align: top;
    margin-top: 10px;
  }
  
  .pay-detail ul li>:nth-child(1),
  .pay-detail ul li>:nth-child(3) {
    display: inline-block;
  }
  
  .pay-calc p {
    display: inline-block;
    width: 250px;
    overflow: hidden;
    color: blue;
    font-size: 15px;
    margin-bottom: 10px;
  }
  
  .pay-detail ul li>:nth-child(1) {
    line-height: 80px;
  }
  
  .calc:nth-child(1) {
    color: red;
    font-size: 20px;
  }
  
  .calc span:not(:nth-child(1)) {
    border: 1px solid rgba(0, 0, 0, 0.3);
    display: inline-block;
    width: 20px;
    text-align: center;
  }
  
  .calc a {
    margin-left: 20px;
  }
  
  .show-1,
  .show-2 {
    display: inline-block;
  }
  
  .show-1,
  .show-2 {
    margin-left: 30px;
  }
  
  .show-price {
    background-color: rgba(0, 0, 0, 0.2);
  }
</style>
